<template>
  <div id="bodypage">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/homePage' }"><span id="mainpage">主页</span></el-breadcrumb-item>
      <el-breadcrumb-item>羊群信息</el-breadcrumb-item>
      <el-breadcrumb-item><span>生产性能</span></el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <!-- 搜索页 -->
      <el-dialog title="请输入检索信息" v-dialogDrag :visible.sync="searchPage" width="970px" :before-close="handleClose">
        <el-form :model="searchData" :inline="true">
          <el-form-item label="羊只编号" label-width="100px">
            <el-input type="number" autocomplete="off" style="width: 189px;" v-model="searchData.sheepId"></el-input>
          </el-form-item>
          <el-form-item label="等级" label-width="100px">
            <el-radio-group v-model="searchData.level" id="elRadio">
              <el-radio-button @click.native="emptySearchValue('特级',$event)" label="特级"></el-radio-button>
              <el-radio-button @click.native="emptySearchValue('一级',$event)" label="一级"></el-radio-button>
              <el-radio-button @click.native="emptySearchValue('二级',$event)" label="二级"></el-radio-button>
              <el-radio-button @click.native="emptySearchValue('等级外',$event)" label="等级外"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年度" label-width="100px" style="margin-right: 0;">
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;" v-model="searchData.yearMax">
            </el-input>
          </el-form-item>
          <span style="margin: 0 5px; height: 40px; display: inline-block; line-height: 40px;">--</span>
          <el-form-item>
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;" v-model="searchData.yearMin">
            </el-input>
          </el-form-item>
          <el-form-item label="体高" label-width="100px" style="margin-right: 0;">
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;"
              v-model="searchData.bodyHightMax"></el-input>
          </el-form-item>
          <span style="margin: 0 5px; height: 40px; display: inline-block; line-height: 40px;">--</span>
          <el-form-item>
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;"
              v-model="searchData.bodyHightMin"></el-input>
          </el-form-item>
          <el-form-item label="体长" label-width="100px" style="margin-right: 0;">
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;"
              v-model="searchData.bodyLengthMax"></el-input>
          </el-form-item>
          <span style="margin: 0 5px; height: 40px; display: inline-block; line-height: 40px;">--</span>
          <el-form-item>
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;"
              v-model="searchData.bodyLengthMin"></el-input>
          </el-form-item>
          <el-form-item label="胸围" label-width="100px" style="margin-right: 0;">
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;" v-model="searchData.bustMax">
            </el-input>
          </el-form-item>
          <span style="margin: 0 5px; height: 40px; display: inline-block; line-height: 40px;">--</span>
          <el-form-item>
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;" v-model="searchData.bustMin">
            </el-input>
          </el-form-item>
          <el-form-item label="体重" label-width="100px" style="margin-right: 0;">
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;"
              v-model="searchData.bodyWeightMax"></el-input>
          </el-form-item>
          <span style="margin: 0 5px; height: 40px; display: inline-block; line-height: 40px;">--</span>
          <el-form-item>
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;"
              v-model="searchData.bodyWeightMin"></el-input>
          </el-form-item>
          <el-form-item label="绒长度" label-width="100px" style="margin-right: 0;">
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;"
              v-model="searchData.pileLengthMax"></el-input>
          </el-form-item>
          <span style="margin: 0 5px; height: 40px; display: inline-block; line-height: 40px;">--</span>
          <el-form-item>
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;"
              v-model="searchData.pileLengthMin"></el-input>
          </el-form-item>
          <el-form-item label="绒产量" label-width="100px" style="margin-right: 0;">
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;"
              v-model="searchData.pileYieldMax"></el-input>
          </el-form-item>
          <span style="margin: 0 5px; height: 40px; display: inline-block; line-height: 40px;">--</span>
          <el-form-item>
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;"
              v-model="searchData.pileYieldMin"></el-input>
          </el-form-item>
          <el-form-item label="管围" label-width="100px" style="margin-right: 0;">
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;" v-model="searchData.tubeMax">
            </el-input>
          </el-form-item>
          <span style="margin: 0 5px; height: 40px; display: inline-block; line-height: 40px;">--</span>
          <el-form-item>
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;" v-model="searchData.tubeMin">
            </el-input>
          </el-form-item>
          <el-form-item label="绒厚" label-width="100px" style="margin-right: 0;">
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;"
              v-model="searchData.pileThicknessMax"></el-input>
          </el-form-item>
          <span style="margin: 0 5px; height: 40px; display: inline-block; line-height: 40px;">--</span>
          <el-form-item>
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;"
              v-model="searchData.pileThicknessMin"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="searchPage = false">取 消</el-button>
          <el-button type="success" @click="searchInfo" @keyup.enter.native="searchInfo">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 新增页 -->
      <el-dialog title="羊只生产性能表" v-dialogDrag :visible.sync="addPage" width="970px" :before-close="handleClose">
        <el-form :inline="true" :model="inputValue">
          <el-form-item label="羊只编号" label-width="100px">
            <el-input type="number" v-model="inputValue.sheepId"></el-input>
          </el-form-item>
          <el-form-item label="等级" label-width="100px">
            <el-radio-group v-model="inputValue.level" class="elRadio_AE">
              <el-radio-button @click.native="emptyAddValue('特级',$event)" label="特级"></el-radio-button>
              <el-radio-button @click.native="emptyAddValue('一级',$event)" label="一级"></el-radio-button>
              <el-radio-button @click.native="emptyAddValue('二级',$event)" label="二级"></el-radio-button>
              <el-radio-button @click.native="emptyAddValue('等级外',$event)" label="等级外"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年度" label-width="100px">
            <el-date-picker style="width: 187px;" v-model="inputValue.year" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="体高" label-width="100px">
            <el-input type="number" v-model="inputValue.bodyHight"></el-input>
          </el-form-item>
          <el-form-item label="体长" label-width="100px">
            <el-input type="number" v-model="inputValue.bodyLength"></el-input>
          </el-form-item>
          <el-form-item label="胸围" label-width="100px">
            <el-input type="number" v-model="inputValue.bust"></el-input>
          </el-form-item>
          <el-form-item label="体重" label-width="100px">
            <el-input type="number" v-model="inputValue.bodyWeight"></el-input>
          </el-form-item>
          <el-form-item label="绒长度" label-width="100px">
            <el-input type="number" v-model="inputValue.pileLength"></el-input>
          </el-form-item>
          <el-form-item label="绒细度" label-width="100px">
            <el-input type="number" v-model="inputValue.pileWide"></el-input>
          </el-form-item>
          <el-form-item label="绒产量" label-width="100px">
            <el-input type="number" v-model="inputValue.pileYield"></el-input>
          </el-form-item>
          <el-form-item label="管围" label-width="100px">
            <el-input type="number" v-model="inputValue.tube"></el-input>
          </el-form-item>
          <el-form-item label="绒厚" label-width="100px">
            <el-input type="number" v-model="inputValue.pileThickness"></el-input>
          </el-form-item>
          <el-form-item label="备注" label-width="100px">
            <el-input type="text" v-model="inputValue.remake"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addPage = false">取 消</el-button>
          <el-button type="success" @click="add">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 查看与编辑页 -->
      <el-dialog title="羊只生产性能表" v-dialogDrag :visible.sync="checkPage" width="970px" :before-close="handleClose">
        <el-form :inline="true" :model="row">
          <el-form-item label="羊只编号" label-width="100px">
            <el-input type="number" v-model="row.个体号"></el-input>
          </el-form-item>
          <el-form-item label="等级" label-width="100px">
            <el-radio-group v-model="row.等级" class="elRadio_AE">
              <el-radio-button @click.native="emptyEditValue('特级',$event)" label="特级"></el-radio-button>
              <el-radio-button @click.native="emptyEditValue('一级',$event)" label="一级"></el-radio-button>
              <el-radio-button @click.native="emptyEditValue('二级',$event)" label="二级"></el-radio-button>
              <el-radio-button @click.native="emptyEditValue('等级外',$event)" label="等级外"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年度" label-width="100px">
            <el-date-picker style="width: 187px;" v-model="row.年度" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="体高" label-width="100px">
            <el-input type="number" v-model="row.体高"></el-input>
          </el-form-item>
          <el-form-item label="体长" label-width="100px">
            <el-input type="number" v-model="row.体长"></el-input>
          </el-form-item>
          <el-form-item label="胸围" label-width="100px">
            <el-input type="number" v-model="row.胸围"></el-input>
          </el-form-item>
          <el-form-item label="体重" label-width="100px">
            <el-input type="number" v-model="row.体重"></el-input>
          </el-form-item>
          <el-form-item label="绒长度" label-width="100px">
            <el-input type="number" v-model="inputValue.绒长度"></el-input>
          </el-form-item>
          <el-form-item label="绒细度" label-width="100px">
            <el-input type="number" v-model="row.绒细度"></el-input>
          </el-form-item>
          <el-form-item label="绒产量" label-width="100px">
            <el-input type="number" v-model="row.绒产量"></el-input>
          </el-form-item>
          <el-form-item label="管围" label-width="100px">
            <el-input type="number" v-model="row.管围"></el-input>
          </el-form-item>
          <el-form-item label="绒厚" label-width="100px">
            <el-input type="number" v-model="row.绒厚"></el-input>
          </el-form-item>
          <el-form-item label="备注" label-width="100px">
            <el-input type="number" v-model="row.备注"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button id="checkPageButton" type="danger" @click="update">修 改</el-button>
          <el-button type="success" @click="checkPage = false">关 闭</el-button>
        </span>
      </el-dialog>
      <div id="headerArea">
        <h2 style="margin:10px 0 10px 10px; display: inline-block;">羊只生产性能表</h2>
        <div>
          <input v-show="false" ref="elementData" type="file" @change="importExcel(this)" />
          <el-button type="success" size="mini" @click="$refs.elementData.click()">导入
          </el-button>
          <el-button type="success" size="mini" style="margin-right: 15px;" @click="exportExcel">导出
          </el-button>
        </div>
      </div>
      <template>
        <el-button @click="addPage = true" round type="success" slot="append" icon="el-icon-edit"
          style="margin: 10px 10px 10px 20px;">新增</el-button>
        <el-button round type="success" slot="append" icon="el-icon-search" style="margin: 10px 0 10px 10px;"
          @click="searchPage = true">搜索</el-button>
      </template>
      <!-- 表格区 -->
      <el-table max-height="450" :data="tableData" :row-class-name="tableRowClassName"
        :header-cell-style="{background:'#f5f7fa',color:'#606266'}" border stripe @row-click="getDetails">
        <el-table-column type="selection" width="35"></el-table-column>
        <el-table-column width="40"><template slot-scope="scope">{{scope.$index+1}}</template></el-table-column>
        <el-table-column type="expand">
          <div slot-scope="props" style="margin-left: 20px;">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="个体号:">
                <span>{{ props.row.个体号 }}</span>
              </el-form-item>
              <el-form-item label="身份证号:">
                <span>{{ props.row.身份证号 }}</span>
              </el-form-item>
              <el-form-item label="年度:">
                <span>{{ props.row.年度 }}</span>
              </el-form-item>
            </el-form>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="体高:">
                <span>{{ props.row.体高 }}</span>
              </el-form-item>
              <el-form-item label="体长:">
                <span>{{ props.row.体长 }}</span>
              </el-form-item>
              <el-form-item label="胸围:">
                <span>{{ props.row.胸围 }}</span>
              </el-form-item>
            </el-form>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="体重:">
                <span>{{ props.row.体重 }}</span>
              </el-form-item>
              <el-form-item label="绒长度:">
                <span>{{ props.row.绒长度 }}</span>
              </el-form-item>
              <el-form-item label="绒细度:">
                <span>{{ props.row.绒细度 }}</span>
              </el-form-item>
            </el-form>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="绒产量:">
                <span>{{ props.row.绒产量 }}</span>
              </el-form-item>
              <el-form-item label="等级:">
                <span>{{ props.row.等级 }}</span>
              </el-form-item>
              <el-form-item label="备注:">
                <span>{{ props.row.备注 }}</span>
              </el-form-item>
            </el-form>
          </div>
        </el-table-column>
        <el-table-column width="100px" sortable prop="个体号" label="个体号" align="center"></el-table-column>
        <el-table-column width="200px" sortable prop="身份证号" label="身份证号" align="center"></el-table-column>
        <el-table-column width="200px" sortable prop="年度" label="年度" align="center"></el-table-column>
        <el-table-column sortable prop="体高" label="体高" align="center"></el-table-column>
        <el-table-column sortable prop="体长" label="体长" align="center"></el-table-column>
        <el-table-column sortable prop="胸围" label="胸围" align="center"></el-table-column>
        <el-table-column sortable prop="体重" label="体重" align="center"></el-table-column>
        <el-table-column width="120px" sortable prop="绒长度" label="绒长度" align="center"></el-table-column>
        <el-table-column width="120px" sortable prop="绒细度" label="绒细度" align="center"></el-table-column>
        <el-table-column width="120px" sortable prop="绒产量" label="绒产量" align="center"></el-table-column>
        <el-table-column width="120px" sortable prop="等级" label="等级" align="center"></el-table-column>
        <el-table-column width="120px" sortable prop="备注" label="备注" align="center"></el-table-column>
        <el-table-column prop="Operate" label="操作" align="center" fixed="right" width="140">
          <template slot-scope="scope">
            <el-button-group>
              <el-tooltip class="item" effect="dark" content="查看编辑" placement="top-start" :enterable="false">
                <el-button @click="checkPage = true" type="success" icon="el-icon-edit"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="标记死亡" placement="top-end" :enterable="false">
                <el-button type="success" icon="el-icon-delete" @click="markDeath(scope.row)"></el-button>
              </el-tooltip>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
        :page-size="queryInfo.pagesize" layout="total, prev, pager, next, jumper" :total="queryInfo.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        searchData: {
          sheepId: '',  //羊只编号
          level: '',     //等级
          yearMax: '',  //年度区间右
          yearMin: '',  //年度区间左
          bodyHightMax: '',   //体高区间右
          bodyHightMin: '',   //体高区间左
          bodyLengthMax: '',    //体长区间右
          bodyLengthMin: '',    //体长区间左
          bustMax: '',        //胸围区间右
          bustMin: '',        //胸围区间左
          bodyWeightMax: '',  //体重区间右
          bodyWeightMin: '',  //体重区间左
          pileLengthMax: '',     //绒长度区间右
          pileLengthMin: '',      //绒长度区间左
          pileYieldMax: '',       //绒产量区间右
          pileYieldMin: '',       //绒产量区间左
          tubeMax: '',            //管围区间右
          tubeMin: '',            //管围区间左
          pileThicknessMax: '',      //绒厚区间右
          pileThicknessMin: '',        //绒厚区间左
        },
        tableData: [],
        searchPage: false,
        checkPage: false,
        addPage: false,
        row: {},
        inputValue: {
          sheepId: '',  //羊只编号
          level: '',     //等级
          year: '',  //年度
          bodyHight: '',   //体高
          bodyLength: '',    //体长
          bust: '',        //胸围
          bodyWeight: '',  //体重
          pileLength: '',     //绒长度
          pileWide: '',       //绒细度
          pileYield: '',       //绒产量
          tube: '',            //管围
          pileThickness: '',      //绒厚
          remake: '',        //备注
        },
        //分页相关数据
        queryInfo: {
          pagenum: 1, // 当前页码
          pagesize: 10, // 当前每页显示的数据数
          total: 0,
          pageStatus: false //标识页码是否发生了变化
        },
        importData: null,
      }
    },
    methods: {
      emptySearchValue(num, e) {
        if (!e.target._value) return
        if (num == this.searchData.level) {
          this.searchData.level = ""
        }
      },
      emptyAddValue(num, e) {
        if (!e.target._value) return
        if (num == this.inputValue.level) {
          this.inputValue.level = ""
        }
      },
      emptyEditValue(num, e) {
        console.log(123);
        if (!e.target._value) return
        if (num == this.row.等级) {
          this.row.等级 = ""
        }
      },
      //搜索
      async searchInfo() {
        console.log(this.searchData);
        let { data } = await this.$axios({
          method: 'post',
          url: '/familyWord/testRong/find',
          data: {
            page: this.queryInfo.pagenum,
            sheepId: this.searchData.sheepId,
            level: this.searchData.level,     //等级
            yearMax: this.searchData.yearMax,  //年度区间右
            yearMin: this.searchData.yearMin,  //年度区间左
            bodyHightMax: this.searchData.bodyHightMax,   //体高区间右
            bodyHightMin: this.searchData.bodyHightMin,   //体高区间左
            bodyLengthMax: this.searchData.bodyLengthMax,    //体长区间右
            bodyLengthMin: this.searchData.bodyLengthMin,    //体长区间左
            bustMax: this.searchData.bodyLengthMin,        //胸围区间右
            bustMin: this.searchData.bustMin,        //胸围区间左
            bodyWeightMax: this.searchData.bodyWeightMax,  //体重区间右
            bodyWeightMin: this.searchData.bodyWeightMin,  //体重区间左
            pileLengthMax: this.searchData.pileLengthMax,     //绒长度区间右
            pileLengthMin: this.searchData.pileLengthMin,      //绒长度区间左
            pileYieldMax: this.searchData.pileYieldMax,       //绒产量区间右
            pileYieldMin: this.searchData.pileYieldMin,       //绒产量区间左
            tubeMax: this.searchData.tubeMax,            //管围区间右
            tubeMin: this.searchData.tubeMin,            //管围区间左
            pileThicknessMax: this.searchData.pileThicknessMax,      //绒厚区间右
            pileThicknessMin: this.searchData.pileThicknessMin,        //绒厚区间左
          }
        })
        //如果获取成功
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: data.msg,
            duration: 2500
          })
        } else {
          //获取失败
          return this.$message({
            type: 'error',
            message: data.msg,
            duration: 2500
          })
        }
        //渲染数据到页面
        this.tableData = data.data.result;
        this.queryInfo.total = data.data.countAll;
        this.searchPage = false
      },
      //新增
      async add() {
        console.log("添加开始");
        this.inputValue.year = this.$moment(this.inputValue.year).format("YYYY-MM-DD");
        let { data } = await this.$axios({
          method: 'post',
          url: '/familyWord/testRong/add',
          data: {
            sheepId: this.inputValue.sheepId,  //羊只编号
            level: this.inputValue.level,     //等级
            year: this.inputValue.year,  //年度
            bodyHight: this.inputValue.bodyHight,   //体高
            bodyLength: this.inputValue.bodyLength,    //体长
            bust: this.inputValue.bust,        //胸围
            bodyWeight: this.inputValue.bodyWeight,  //体重
            pileLength: this.inputValue.pileLength,     //绒长度
            pileWide: this.inputValue.pileWide,       //绒细度
            pileYield: this.inputValue.pileYield,       //绒产量
            tube: this.inputValue.tube,            //管围
            pileThickness: this.inputValue.pileThickness,      //绒厚
            remake: this.inputValue.remake,        //备注
          }
        })
        console.log(data);
        console.log("添加中");
        //如果添加成功
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: data.msg,
            duration: 1500
          })
        } else {
          //添加失败
          return this.$message({
            type: 'error',
            message: data.msg,
            duration: 1500
          })
        }
        this.addPage = false
      },
      //编辑更新
      async update() {
        console.log(this.row);
        console.log("更新开始");
        this.row.年度 = this.$moment(this.row.年度).format("YYYY-MM-DD");
        let { data } = await this.$axios({
          method: 'post',
          url: '/familyWord/testRong/update',
          data: {
            sheepId: this.row.个体号,  //羊只编号
            level: this.row.等级,     //等级
            year: this.row.年度,  //年度
            bodyHight: this.row.体高,   //体高
            bodyLength: this.row.体长,    //体长
            bust: this.row.胸围,        //胸围
            bodyWeight: this.row.体重,  //体重
            pileLength: this.row.绒长度,     //绒长度
            pileWide: this.row.绒细度,       //绒细度
            pileYield: this.row.绒产量,       //绒产量
            tube: this.row.管围,            //管围
            pileThickness: 1,      //绒厚
            remake: this.row.备注,        //备注
          }
        })
        console.log("更新结束");
        console.log(data);
        //如果更新成功
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: data.msg,
            duration: 1500
          })
        } else {
          //更新失败
          return this.$message({
            type: 'error',
            message: data.msg,
            duration: 1500
          })
        }
        this.checkPage = false
        this.getInfoById();
      },
      //改变已死亡或已售出的羊只表格颜色
      tableRowClassName({ row, rowIndex }) {
        if (row.死亡 == '是') {
          return 'die-row';
        } else if (row.订单编号) {
          return 'sell-row';
        }
        return '';
      },
      //获取点击行数据并赋值给row
      getDetails(row) {
        this.row = JSON.parse(JSON.stringify(row)) // 调用JSON方法防止内存冲突
        // console.log(this.row.年度);
        // this.row.年度 = this.$moment(this.row.年度).format("YYYY-MM-DD");
        this.row.年度 = this.row.年度.split("T")[0];
        // console.log(this.row.年度);
      },
      //通用弹出框函数
      handleClose(done) {
        this.$messagebox.confirm('确认关闭？')
          .then(_ => { done() })
          .catch(_ => { })
      },

      // 改变页码值
      handleCurrentChange(newPage) {
        this.queryInfo.pagenum = newPage;
        this.searchInfo();
      },

      //导出Excel表格
      exportExcel() {
        let data = this.tableData;
        //1. 新建一个工作簿
        let workbook = this.$XLSX.utils.book_new();
        //2. 把json对象转成工作表
        let sheet = this.$XLSX.utils.json_to_sheet(data);
        //3.在工作簿中添加工作表
        this.$XLSX.utils.book_append_sheet(workbook, sheet, '羊只生产性能表'); //工作簿名称
        //4.输出工作表,由文件名决定的输出格式
        this.$XLSX.writeFile(workbook, '羊只生产性能表(导出日期：' + this.$moment().format("YYYY年MM月DD日 HH时mm分ss秒 dddd") + ').xlsx'); // 保存的文件名
      },
      //导入Excel表格数据
      importExcel() {
        let obj = this.$refs.elementData
        let file = obj.files[0];
        if (!obj.files || file == undefined) return
        let $this = this //将vm的值赋值给变量$this
        {
          let reader = new FileReader();
          reader.onload = function (e) {
            let data = e.target.result;
            let tempData = $this.$XLSX.read(data, { type: 'binary' });
            $this.importData = JSON.stringify($this.$XLSX.utils.sheet_to_json(tempData.Sheets[tempData.SheetNames[0]]))
            console.log($this.importData);
          };
          reader.readAsArrayBuffer(file);
        }
      },
      //回车确定搜索或新增
      watchEnter(e) {
        if (e.key == "Enter" && this.searchPage) {
          this.searchInfo()
        } else if (e.key == "Enter" && this.addPage) {
          this.add()
        }
      }
    },
    //监听键盘事件
    mounted() {
      document.addEventListener('keyup', this.watchEnter);
    },
    beforeRouteLeave(to, from, next) {
      document.removeEventListener('keyup', this.watchEnter) //路由跳转前移除事件监听
      next()
    }
  }

</script>
<style Lang="less" scoped>
  * {
    color: #4b9100;
  }

  #checkPageButton {
    margin-right: 40px;
    width: 100px;
    height: 42px;
  }

  #checkPageButton+button {
    width: 100px;
    height: 42px;
  }

  .demo-table-expand {
    font-size: 10px;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 15%;
  }

  #searchNum>>>.el-input__inner {
    border: 2px solid rgb(75, 152, 207);
    border-radius: 10px;
    color: #000;
  }

  #headerArea {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #elRadio>>>.el-radio-button__inner {
    padding: 12px 7.3px;
  }

  .elRadio_AE>>>.el-radio-button__inner {
    padding: 12px 7px;
  }
</style>